<template>
  <div class="category">
    <div class="item" v-for="(item, index) in attrList" :key="index">
      <div class="title">{{ item.name }}：</div>
      <div class="options">
        <div
          class="option"
          v-for="(oitem, oindex) in item.values"
          :key="oindex"
          :class="item.selected == oindex ? 'active' : ''"
          @click="
            attrList[index].selected = oindex
            $forceUpdate()
          "
        >
          {{ oitem }}
        </div>
      </div>
    </div>
    <div class="item">
      <div class="title">应用场景：</div>
      <div class="options">
        <div
          class="option"
          v-for="(item, index) in scenarioList"
          :key="item.id"
          :class="scenarioListSelected == index ? 'active' : ''"
          @click="scenarioListSelected = index"
        >
          {{ item.dictLabel }}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      type: 0,
      productCategoryTwoId: 0,
      scenarioList: [],
      attrList: [],
      scenarioListSelected: -1
    }
  },
  mounted() {
    this.productCategoryTwoId = parseInt(this.$route.query.id)
    this.getAttrList()
    this.getScenarioList()
  },
  methods: {
    getScenarioList() {
      uni.request({
        url: this.apiUrl + 'productApi/scenariosList',
        method: 'GET',
        success: res => {
          this.scenarioList = res.data.data
          const self = this
          this.scenarioList.map(
            (item, index) => (self.scenarioList[index].selected = -1)
          )
        },
        complete: () => {}
      })
    },
    getAttrList() {
      uni.request({
        url:
          this.apiUrl +
          'productApi/getProductReAttrs?id=' +
          this.productCategoryTwoId,
        method: 'GET',
        success: res => {
          this.attrList = res.data.data
          const self = this
          this.attrList.map(
            (item, index) => (self.attrList[index].selected = -1)
          )
        },
        complete: () => {}
      })
    }
  }
}
</script>

<style lang="scss">
.category {
  box-shadow: 0px -2px 0px 0px #ff590f;
  border: 1px solid #dddddd;
  width: 1200px;
  margin: 0 auto;
  margin-top: 56px;

  .item {
    border-bottom: 1px solid #dddddd;

    display: flex;
    justify-content: top;

    .title {
      font-size: 14px;
      font-weight: 400;
      color: #535353;
      margin-left: 20px;
      display: inline-block;
      width: 170px;
      margin-top: 20px;
    }
    .options {
      display: inline-block;
      width: 1000px;
      margin-top: 20px;
      margin-bottom: 20px;
      .option {
        display: inline-block;
        font-size: 14px;
        font-weight: 400;
        color: #222222;
        width: 80px;
        margin-right: 39px;
      }
      .active {
        color: #ff590f;
      }
    }
  }
  .item:last-child {
    border-bottom: none;
  }
}
</style>
